<template>
  <div :class="{ 'hidden': hidden }" class="pagination-container">
    <el-pagination
      :background="background"
      v-model:current-page="currentPage"
      @current-change="handleCurrentChange"
      :layout="layout"
      :total="total"
    />
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue';

const props = defineProps({
  total: {
    required: true,
    type: Number
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 20
  },

  layout: {
    type: String,
    default: 'prev,total, pager, next'
  },
  background: {
    type: Boolean,
    default: true
  },
  hidden: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits();
const currentPage = computed({
  get() {
    return props.page
  },
  set(val) {
    emit('update:page', val)
  }
})
function handleCurrentChange(val:number) {
  emit('pagination', { page: val})
}

</script>

<style scoped lang="scss">
.pagination-container.hidden {
  display: none;
}
</style>